<template>
  <div class="user-center">
    <div class="user-box">
      <div class="user-left">
        <UserLeft></UserLeft>
      </div>
      <div class="user-right">
        <h1>完善公司信息<span> (*是必填项)</span></h1>
        <div class="user-info-box">
          <el-form
            ref="ruleForm"
            :rules="rules"
            label-position="right"
            label-width="142px"
            :model="ruleForm"
          >
            <el-form-item label="公司名称：" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
              <p class="user-title-tips">同营业执照一致</p>
            </el-form-item>
            <el-form-item label="公司性质：" prop="nature">
              <el-select v-model="ruleForm.nature" placeholder="请选择">
                <el-option
                  v-for="item in companyNature"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司简称：" prop="subTitle">
              <el-input v-model="ruleForm.subTitle"></el-input>
            </el-form-item>
            <el-form-item label="专利数量：" prop="patentCount">
              <el-input v-model="ruleForm.patentCount"></el-input>
            </el-form-item>
            <el-form-item label="公司是否已上市：" prop="market">
              <el-radio v-model="ruleForm.market" label="1">是</el-radio>
              <el-radio v-model="ruleForm.market" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="是否有融资需求：" prop="needMoney">
              <el-radio v-model="ruleForm.needMoney" label="1">是</el-radio>
              <el-radio v-model="ruleForm.needMoney" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="归属地：" class="attribution">
              <el-select v-model="prov">
                <el-option
                  v-for="(option, index) in arr"
                  :value="option.name"
                  :key="index"
                >
                  {{ option.name }}
                </el-option>
              </el-select>
              <el-select v-model="city">
                <el-option
                  v-for="(option, index) in cityArr"
                  :value="option.name"
                  :key="index"
                >
                  {{ option.name }}
                </el-option>
              </el-select>
              <el-select v-model="district" v-if="district">
                <el-option
                  v-for="(option, index) in districtArr"
                  :value="option.name"
                  :key="index"
                >
                  {{ option.name }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司办公地址：" prop="workAddress">
              <el-input v-model="ruleForm.workAddress"></el-input>
            </el-form-item>
          </el-form>
          <div class="submit-box">
            <el-button class="submit" @click="submit()" type="primary"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserLeft from "./components/UserLeft";
import area from "@/assets/js/area.js";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    UserLeft,
  },
  data() {
    return {
      ruleForm: {
        name: "",
        subTitle: "",
        patentCount: "",
        nature: "",
        market: "",
        needMoney: "",
        registerAddress: "",
        workAddress: "",
        attribution: "",
      },
      rules: {
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        subTitle: [
          { required: true, message: "请输入公司简称", trigger: "blur" },
        ],
        patentCount: [
          { required: true, message: "请输入已有专利数量", trigger: "blur" },
        ],
        nature: [
          { required: true, message: "请选择公司性质", trigger: "blur" },
        ],
        market: [{ required: true }],
        needMoney: [{ required: true }],
      },
      arr: area.arrAll,
      prov: "省份",
      city: "城市",
      district: "区域",
      cityArr: [],
      districtArr: [],
    };
  },
  mounted() {
    this.init();
    this.getCompanyNature();
  },
  methods: {
    ...mapActions(["getCompanyNature", "companySave", "getUserInfo"]),
    init() {
      this.getUserInfo().then((res) => {
        this.ruleForm.nature = this.userCompanyInfo.nature_id;
        this.ruleForm.name = this.userCompanyInfo.title;
        this.ruleForm.subTitle = this.userCompanyInfo.sub_title;
        this.ruleForm.market = this.userCompanyInfo.is_listed + "";
        this.ruleForm.needMoney = this.userCompanyInfo.is_finance + "";
        this.ruleForm.patentCount = this.userCompanyInfo.patent_count;
        this.ruleForm.workAddress = this.userCompanyInfo.work_address;
        this.prov = this.userCompanyInfo.province;
        this.city = this.userCompanyInfo.city;
        this.district = this.userCompanyInfo.area;
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            nature_id: this.ruleForm.nature,
            title: this.ruleForm.name,
            sub_title: this.ruleForm.subTitle,
            is_listed: this.ruleForm.market,
            is_finance: this.ruleForm.needMoney,
            patent_count: this.ruleForm.patentCount,
            work_address: this.ruleForm.workAddress,
            province: this.prov,
            city: this.city,
            area: this.district,
          };
          this.companySave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updateCity() {
      for (var i in this.arr) {
        var obj = this.arr[i];
        if (obj.name) {
          if (obj.name == this.prov) {
            this.cityArr = obj.sub;
            break;
          }
        }
      }
      this.city = this.cityArr[1].name;
    },
    updateDistrict() {
      for (var i in this.cityArr) {
        var obj = this.cityArr[i];
        if (obj.name == this.city) {
          this.districtArr = obj.sub;
          break;
        }
      }
      if (
        this.districtArr &&
        this.districtArr.length > 0 &&
        this.districtArr[1].name
      ) {
        this.district = this.districtArr[1].name;
      } else {
        this.district = "";
      }
    },
  },
  computed: {
    ...mapGetters(["companyNature", "userCompanyInfo"]),
  },
  beforeMount() {
    this.updateCity();
    this.updateDistrict();
  },
  watch: {
    prov() {
      this.updateCity();
      this.updateDistrict();
    },
    city() {
      this.updateDistrict();
    },
  },
};
</script>

<style scoped>
.user-info-box {
  padding-right: 350px;
  min-height: 700px;
}
.user-info-box >>> .el-select {
  width: 100%;
}
.attribution >>> .el-select {
  width: 30%;
  margin-right: 3.3%;
}
.attribution >>> .el-select:nth-last-of-type(1) {
  margin-right: 0;
}
</style>